<template>
  <div class="tarcontrol">
    <div
      class="tarcontrolitem"
      v-for="(item, index) in title"
      :key="index"
      @click="tarclick(index)"
      :class="{ fonecolor: index == count }"
    >
      {{ item }}
    </div>
  </div>

  <!-- 这里并不需要加button按钮标签，直接给div添加点击事件就行了 -->
  <!-- <div>
        <button @click="btnclick(index)" :class="{ fonecolor: index == count }">
          {{ item }}
        </button>
      </div> -->
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  props: {
    title: [],
  },
  methods: {
    tarclick(index) {
      this.count = index;
      // typeclick自定义事件
      this.$emit("typeclick", index);
    },
  },
};
</script>
<style scoped>
.tarcontrol {
  display: flex;
  text-align: center;
  font-size: 16px;
  background-color: white;
  z-index: 1;
}
.tarcontrolitem {
  flex: 1;
  height: 40px;
  line-height: 40px;
}
.fonecolor {
  color: pink;
  border-bottom: 3px solid pink;
}
</style>